<template>
	<view>

		<u-upload :fileList="list" accept="image" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="disabled?list.length:maxCount" :width="width" :height="height" :capture="['album', 'camera']"
			:uploadText="uploadText" :disabled="disabled" :deletable="!disabled">
		</u-upload>
		<helang-compress ref="helangCompress"></helang-compress>
	</view>
</template>

<script>
	import helangCompress from '@/components/helang-compress/helang-compress';
	import moment from 'moment'
	var CryptoJS = require('crypto-js');
	import { compressImage } from "@/utils/image"

	export default {
		name: "upload",
		components: {
			helangCompress
		},
		props: {
			accept: {
				type: String,
				default: 'image',
			},
			maxCount: {
				type: Number,
				default: 1,
			},
			value: {
				type: String,
				default: '',
			},
			width: {
				type: String,
				default: '155rpx',
			},
			height: {
				type: String,
				default: '155rpx',
			},
			uploadText: {
				type: String,
				default: '上传',
			},
			disabled: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				website: this.$store.state.website,
				fileList: [],
				client: null,
				ossInfo: {}
			};
		},
		computed: {
			list() {
				let list = []
				for (let vo of this.fileList) {
					list.push({
						status: vo.status,
						message: vo.status,
						url: vo.status == 'success' ? (vo.url) : vo.url,
						fileId: vo.fileId
					})
				}
				return list
			}
		},
		watch: {
			value() {

				this.initFileList()
			}
		},
		mounted() {

			this.initFileList()

		},
		methods: {
			initFileList() {
				let arr = []
				if (this.value) {
					arr = this.value.split(',')
				}

				let fileList = []
				for (let i in arr) {
					fileList.push({
						status: 'success',
						message: '',
						url: arr[i],
						fileId: i
					})
				}
				this.fileList = fileList
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title:"上传中",
					mask:true
				})
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(event)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					var res
					// console.log(lists[i].size, 10 * 1024 * 1024)
					// if (lists[i].size > 10 * 1024 * 1024) {
					// 	res = {
					// 		code: 201,
					// 		msg: "文件大小不能超过10M"
					// 	}
					// } else {
						
					// }
					var finallPath
					if (lists[i].size > 1 * 1024 * 1024) {
						 finallPath = await compressImage.call(this, lists[i].url);
						console.log(finallPath)
						// uni.saveFile({
						// 	tempFilePath: finallPath,
						// 	success: (saveRes) => {
						// 		console.log(saveRes);
						// 	}
						// });
					}
					else {
						finallPath = lists[i].url
					}
					try {
						res = await this.$http.uploadFile(finallPath)
					} catch (err) {
						res = {
							code: 201,
							msg: "上传失败"
						}
					}
					if (res.code == 200) {
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: res.data.url,
							fileId: res.data.url
						}))
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						this.fileList.splice(fileListLen, 1)
						// console.log(this.fileList[fileListLen])
						// this.fileList[fileListLen].status="uploading"
						// this.fileList[fileListLen].message="上传失败"
					}



					fileListLen++
				}
				uni.hideLoading()
				this.emitValue()
			},


			uploadF(url, i) {
				return new Promise((resolve, reject) => {

					const uploadUrl = config.baseUrl + "/system/oss/upload";

					uni.uploadFile({
						url: uploadUrl,
						filePath: url,
						name: 'file',
						formData: {
							'key': filePath, // 服务利用key找到文件
							'policy': policy,
							'OSSAccessKeyId': accessKeyId,
							'signature': signature,
							'success_action_status': '200',
						},
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							console.log(res)

						},
					})

				})

			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.emitValue()
			},
			emitValue() {
				let arr = []
				for (let vo of this.fileList) {
					arr.push(vo.url)
				}
				this.$emit('input', arr.join(','))
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-upload {
		width: 182rpx;
		height: 182rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid #DDDDDD;
		opacity: 1;
		border-radius: 10rpx;

		.u-icon__icon {
			color: rgba(153, 153, 153, 1);
		}

	}
</style>